<script setup>
import { Link } from '@inertiajs/vue3'

const props = defineProps({
  large: {
    type: Boolean,
    default: false,
  },
  className: {
    type: String,
    default: '',
  },
  style: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <Link
    href="/"
    aria-label="首页"
    :class="['pointer-events-auto block', props.className]"
  >
    <div
      :class="[
        'rounded-full bg-zinc-100 dark:bg-zinc-800',
        props.large ? 'h-16 w-16' : 'h-9 w-9',
      ]"
      :style="props.style"
    >
      <div
        :class="[
          'rounded-full bg-gradient-to-br from-primary-500 to-amber-500',
          props.large ? 'h-16 w-16' : 'h-9 w-9',
        ]"
      />
    </div>
  </Link>
</template>
